<template>
    <div class="tabs-cps-view">
        <tabFiveTabelShow v-if="isShow" type="portray" title="写真フォルダ" @close="isShow = false"
            @getResponse="getResponse">
        </tabFiveTabelShow>
        <ImportDialogForPic v-if="isUpShow" :_api="api" @close="isUpShow = false" :title="title"
            @getResponse="getResponse" :type="3">
        </ImportDialogForPic>
        <div class="title">
            <p></p>
            <p class="r-describe">
                <el-button class="black-btn" @click="isShow = true">
                    <span>フォルダーを開く</span>
                </el-button>
                <el-button class="black-btn" @click="isUpShow = true">
                    <i class="iconfont" style="font-size:16px;">&#xe825;</i>
                    <span>アップロード</span>
                </el-button>
                <el-button class="black-btn" @click="delFn">
                    <span style="margin: 0;">削除</span>
                </el-button>
            </p>
        </div>
        <div>
            <div class="row">
                <div class="img-item">
                    <img class="img" fit="cover" alt=" " :src="path1" v-show="path1" />
                </div>
                <div class="text-item-view">
                    <p class="_title">メモ</p>
                    <el-input type="textarea" :rows="3" placeholder=" " class="textarea" style="background:#FFF;"
                        v-model="Cmnt" @input="Cmnt = $setMaxLength(Cmnt, 200)"></el-input>
                    <p class="_title">ファイル名</p>
                    <!-- <el-input type="textarea" :rows="1" placeholder=" " class="textarea1" v-model="currentItem.fileName"
                        readonly></el-input> -->
                    <el-input type="textarea" :rows="1" placeholder=" " class="textarea" style="background:#FFF;"
                        v-model="currentItem.fileName"></el-input>
                    <!-- <el-input type="textarea" :rows="1" placeholder=" " class=""
                        v-model="currentItem.fileName"></el-input> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import { UpdResOfferBookAssociationDataVerify, UpdResOfferDetialsPhotoData, GetResOfferDetialsPhotoData, delThckDeterminatorTipsMsg, GetNoFileTipsMsg } from "@/api/api";
import tabFiveTabelShow from '@/components/TabelLineCadViews/BSDetailConmpontents/tabFiveTabelShow.vue'
import ImportDialogForPic from '@/components/Excel/ImportDialog/ImportDialogForPic.vue';
import { getLocalStorage } from "@/utils/storage";
import { getBlobPath } from '@/utils/downFIleByBlob';
import _ from 'lodash-es';
export default {
    name: "Tab_4",
    props: {
        offerComboxData: Object,
        tableSelectRow: Object,
        rightViewFlag: Boolean
    },
    data() {
        return {
            checkImg: require("@/assets/img/checkbox_sel.png"),
            uncheckImg: require("@/assets/img/checkbox_unsel.png"),
            prposTabelData: [
            ],
            tableHeight: 350,
            loading: false,
            import_dialog_flag: false,
            dateValue: "2021-12",
            isShow: false,
            isUpShow: false,
            api: '/api/Visual/UpLoadResOfferPhotoAssFile',
            title: '報告書フォルダ',
            currentItem: {
                cmnt: '',
                fileName: '',
                path: ''
            },
            currentItemTemp: {
                cmnt: '',
                fileName: '',
                path: ''
            },
            Cmnt: '',
            CmntTemp: '',
            FileName: '',
            arr: [],
            path1: ''
        };
    },
    components: {
        tabFiveTabelShow, ImportDialogForPic
    },

    computed: {
        macCodeValue() {
            return this.$store.state.macCode;
        },
    },

    watch: {
        macCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getResOfferPhotoDataApi();
            },
        },

        tableSelectRow: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                this.dateValue = this.tableSelectRow.ssn_date;
                this.getResOfferPhotoDataApi();
            },
        },
        currentItem: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                this.$emit("DataChangeFn", !_.isEqual(newV, this.currentItemTemp))
            },
        },
        Cmnt: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                this.$emit("DataChangeFn", !_.isEqual(newV, this.CmntTemp))
            },
        },
        rightViewFlag: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                if (newV) {
                    this.dateValue = this.tableSelectRow.ssn_date;
                    this.getResOfferPhotoDataApi();
                }
            },
        },
    },
    methods: {
        saveFn(isSaveBtn) {
            let D = {
                Account: getLocalStorage("userName"),
                DmgCode: this.$store.state.macCode,
                ActuNo: Number(this.tableSelectRow.actuNo) || Number(this.$store.state.ISP_Info.actukbn) || 0,
                Cmnt: this.Cmnt,
                FileName: this.currentItem.fileName,
            }
            return D

            let msg = "変更内容を保存します、宜しいですか?";

            // let tipMsg = await this.getMsg(type);
            this.$confirm(msg, '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(async () => {
                this.$emit("isConfirmingFn", false);
                let D = {
                    Account: getLocalStorage("userName"),
                    DmgCode: this.$store.state.macCode,
                    ActuNo: Number(this.tableSelectRow.actuNo),
                    Cmnt: this.Cmnt,
                    FileName: this.currentItem.fileName,
                }
                // let R = await UpdResOfferBookAssociationDataVerify(D);
                // if (!R || R.data.code == 452) {
                //     return
                // }
                let res = await UpdResOfferDetialsPhotoData(D);
                if (!res || res.data.code == 452) {
                    return
                }
                if (res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                    return
                }
                this.$message({
                    type: 'success',
                    message: 'OK'
                });
                this.getResOfferPhotoDataApi();
            }).catch(() => {
                this.$emit("isConfirmingFn", false);
                this.isConfirming = false;

                if (isSaveBtn) {
                    return
                }
                this.$store.state.isCurrentFn();
                this.$store.commit("reSetIsCurrent");
            })


        },
        async delFn(item) {
            this.currentItem.actuNo = Number(this.tableSelectRow.actuNo);
            this.Cmnt = '';
            this.currentItem.dmgCode = this.$store.state.macCode;
            this.currentItem.fileName = '';
            this.currentItem.path = '';
            return


            // let R = await delThckDeterminatorTipsMsg({})
            // this.$confirm(R.data.msg, '', {
            //     confirmButtonText: 'OK',
            //     cancelButtonText: 'Cancel',
            //     type: 'warning'
            // }).then(async () => {
            //     this.currentItem.actuNo = Number(this.tableSelectRow.actuNo);
            //     this.Cmnt = '';
            //     this.currentItem.dmgCode = this.$store.state.macCode;
            //     this.currentItem.fileName = '';
            //     this.currentItem.path = '';
            // }).catch(() => {
            // });
        },
        async getResponse(arr) {
            // this.$message.success("OK");
            this.arr = arr;
            this.currentItem.actuNo = Number(this.tableSelectRow.actuNo);
            // this.Cmnt = '';
            this.currentItem.dmgCode = this.$store.state.macCode;
            this.currentItem.fileName = `${arr[0].name}.${arr[0].ext}`;
            this.currentItem.path = arr[0].path;
            this.path1 = await getBlobPath({
                path: arr[0].path,
                isTIFF: arr[0].path.indexOf('.tif') != -1 || arr[0].path.indexOf('.tiff') != -1 ? true : false
            });
        },

        handleCurrentChange(val) {
            console.log(val);
            this.currentItem = val;
        },

        getResOfferPhotoDataApi() {
            if (!this.tableSelectRow.actuNo) {
                return
            }
            let temp = {
                PltCode: this.$store.state.pltCode,
                DmgCode: this.$store.state.macCode,
                ActuNo: Number(this.tableSelectRow.actuNo),
            };

            GetResOfferDetialsPhotoData(temp).then(async (res) => {
                console.log("GetResOfferDetialsPhotoData =-=-=-=- ", res);
                this.prposTabelData = [];
                if (res.data.code == 0) {
                    this.prposTabelData = res.data.data;

                    this.currentItem = _.cloneDeep(this.prposTabelData[0]);
                    this.currentItemTemp = _.cloneDeep(this.prposTabelData[0]);
                    this.Cmnt = _.cloneDeep(this.currentItem.cmnt);
                    this.CmntTemp = _.cloneDeep(this.currentItem.cmnt);

                    this.path1 = await getBlobPath({
                        path: this.currentItem.path,
                        isTIFF: this.currentItem.path.indexOf('.tif') != -1 || this.currentItem.path.indexOf('.tiff') != -1 ? true : false
                    });


                } else {
                    this.currentItem = {};
                }
            });
        },
    },
    created() {
        let that = this;
        this.$nextTick(function () {
            let heightStyle = $(".right-cps-view").height() - 88;
            that.tableHeight = heightStyle;
        });
        // this.getResOfferPhotoDataApi();
    },
    mounted() {
        let that = this;
        window.addEventListener(
            "resize",
            () => {
                return (() => {
                    let heightStyle = $(".right-cps-view").height() - 88;
                    that.tableHeight = heightStyle;
                })();
            },
            false
        );
        // this.getResOfferPhotoDataApi();
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabs-cps-view {
    width: 100%;

    .title {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .add-btn {
            height: 32px;
            background: #106ebe;
            color: #fff;
            border-radius: 4px;
        }
    }
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//     background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
    border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
    box-shadow: none;
}

.r-describe {
    display: flex;
    align-items: center;

    .el-icon-upload2,
    .el-icon-download,
    .el-icon-delete-solid,
    .el-icon-refresh {
        font-size: 14px;
        margin: 0 8px;
        cursor: pointer;
    }
}

.black-btn {
    padding: 0 8px;
    height: 32px;
    font-size: 14px;
    // color: rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    font-weight: 500;
    margin: 0 8px;
    // border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;

    span {
        margin: 0 0 0 8px;
    }
}

::v-deep .el-input__inner {
    background: none;
    border: 0 none;
    padding: 0;
}

.row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 12px;

    .img-item {
        width: 290px;
        height: 186px;
        text-align: center;
        border: 1px solid #d9d9d9;

        img {
            width: 290px;
            height: 186px;
        }
    }

    .check-lay {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

.text-item-view {
    width: calc(100% - 306px);

    ._title {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 12px;
    }
}

.textarea {
    margin-bottom: 12px;

    ::v-deep .el-textarea__inner {
        resize: none;
    }
}

.textarea1 {
    margin-bottom: 12px;

    ::v-deep .el-textarea__inner {
        resize: none;
        background: #ffffe1;
    }
}
</style>
